<template>
  <basic-container>
    <avue-form
      v-model="ruleForm"
      :option="formOption"
      @submit="submitForm"
    ></avue-form>
    <!-- <template>
      <el-row>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="头像">
                <el-upload
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  class="avatar-uploader"
                  action="/admin/sys-file/upload"
                >
                  <img
                    v-if="ruleForm.avatar"
                    id="avatar"
                    :src="avatarUrl"
                    class="avatar"
                  />
                  <i
                    v-else
                    class="el-icon-plus avatar-uploader-icon"
                  />
                </el-upload>
              </el-form-item>
              <el-form-item
                label="用户名"
                prop="username"
              >
                <el-input
                  v-model="ruleForm.username"
                  type="text"
                  disabled
                />
              </el-form-item>
              <el-form-item
                label="手机号"
                prop="phone"
              >
                <el-input
                  v-model="ruleForm.phone"
                  placeholder="验证码登录使用"
                />
              </el-form-item>
              <el-form-item
                label="昵称"
                prop="nickname"
              >
                <el-input
                  v-model="ruleForm.nickname"
                  placeholder="昵称"
                />
              </el-form-item>
              <el-form-item
                label="姓名"
                prop="name"
              >
                <el-input
                  v-model="ruleForm.name"
                  placeholder="姓名"
                />
              </el-form-item>
              <el-form-item
                label="邮箱"
                prop="email"
              >
                <el-input
                  v-model="ruleForm.email"
                  placeholder="邮箱"
                />
              </el-form-item>
              <el-form-item
                label="原密码"
                prop="password"
              >
                <el-input
                  v-model="ruleForm.password"
                  type="password"
                  auto-complete="off"
                />
              </el-form-item>
              <el-form-item
                label="新密码"
                prop="newpassword1"
              >
                <el-input
                  v-model="ruleForm.newpassword1"
                  type="password"
                  auto-complete="off"
                />
              </el-form-item>
              <el-form-item
                label="确认密码"
                prop="newpassword2"
              >
                <el-input
                  v-model="ruleForm.newpassword2"
                  type="password"
                  auto-complete="off"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm()"
                >提交</el-button>
                <el-button @click="resetForm()">重置</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </template> -->
  </basic-container>
</template>

<script>
// import { handleImg } from '@/util';
import { mapState } from 'vuex';
// import store from '@/store';
// import { getStore } from '@/util/store';

import { editInfo } from '@/api/admin/user';
import { formOption } from '@/const/crud/admin/info';

export default {
  data() {
    return {
      formOption: formOption(this),
      avatarUrl: '',
      // headers: {
      //   Authorization: 'Bearer ' + store.getters.access_token,
      // },
      ruleForm: {
        username: '',
        password: '',
        newpassword1: '',
        newpassword2: '',
        avatar: '',
        phone: '',
        nickname: '',
        name: '',
        email: '',
      },
      // rules: {
      //   phone: [{ required: false, validator: validatePhone, trigger: 'blur' }],
      //   password: [
      //     {
      //       required: true,
      //       min: 6,
      //       message: '原密码不少于6位',
      //       trigger: 'blur',
      //     },
      //   ],
      //   newpassword1: [
      //     {
      //       required: false,
      //       min: 6,
      //       message: '新密码不少于6位',
      //       trigger: 'blur',
      //     },
      //   ],
      //   newpassword2: [
      //     { required: false, validator: validatePass, trigger: 'blur' },
      //   ],
      // },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    // formOption() {
    //   return formOption(this);
    // },
  },
  created() {
    this.resetForm();
  },
  methods: {
    async submitForm(form, done) {
      try {
        await editInfo(this.ruleForm);
        this.$notify.success('修改成功');
        // 修改后注销当前token,重新登录
        this.$store.dispatch('LogOut').then(() => {
          location.reload();
        });
        done();
      } catch (error) {
        done();
        throw new Error(error);
      }
    },
    resetForm() {
      this.ruleForm.password = undefined;
      this.ruleForm.newpassword1 = undefined;
      this.ruleForm.newpassword2 = undefined;
      this.ruleForm.username = this.userInfo.username;
      this.ruleForm.phone = this.userInfo.phone;
      this.ruleForm.avatar = this.userInfo.avatar;
      this.ruleForm.nickname = this.userInfo.nickname;
      this.ruleForm.name = this.userInfo.name;
      this.ruleForm.email = this.userInfo.email;
      this.ruleForm.avatar = this.userInfo.avatar;
      // handleImg(this.userInfo.avatar, 'avatar');
      //判断是否选择了租户ID
      // const TENANT_ID = getStore({ name: 'tenantId' });
      // if (TENANT_ID) {
      //   this.headers['TENANT-ID'] = TENANT_ID; // 租户ID
      // }
    },
    // handleAvatarSuccess(res, file) {
    //   this.avatarUrl = URL.createObjectURL(file.raw);
    //   this.ruleForm.avatar = res.data.url;
    // },
    // handleClick(thirdpart) {
    //   let appid, client_id, url;
    //   const redirect_uri = encodeURIComponent(
    //     window.location.origin + '/#/authredirect'
    //   );
    //   if (thirdpart === 'wechat') {
    //     appid = 'wxd1678d3f83b1d83a';
    //     url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect`;
    //   } else if (thirdpart === 'tencent') {
    //     client_id = '101322838';
    //     url = `https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
    //   } else if (thirdpart === 'gitee') {
    //     client_id =
    //       'f5a05b92e869e4e3e037dffc3d54b2bb7fb9d5e45bcde67cd6472adb03e0b9dd';
    //     url = `https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
    //   } else if (thirdpart === 'osc') {
    //     client_id = 'neIIqlwGsjsfsA6uxNqD';
    //     url = `https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=${client_id}&state=OSC-BIND&redirect_uri=${redirect_uri}`;
    //   }
    //   openWindow(url, thirdpart, 540, 540);
    // },
  },
};
</script>
<style lang="scss">
@import '@/styles/info.scss';
</style>
